<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html dir="ltr">

<head>
  <meta http-equiv="Content-Type"  content="text/html; charset=iso-8859-1" />
  <meta http-equiv="Cache-Control" content="no-cache" />
  <meta http-equiv="Pragma"        content="no-cache" />
  <meta http-equiv="Cache-Control" content="no-store" />
  <meta http-equiv="Cache-Control" content="must-revalidate" />
  <meta http-equiv="Expires"       content="Tue, 7 June 2011 10:00:00 GMT" />
  <style type="text/css">
    body, html { font-family:helvetica,arial,sans-serif; font-size:90%; width: 100%; height: 100%; margin: 0;}
  </style>
  <link rel="stylesheet" type="text/css" href="js/dojo-root/dijit/themes/claro/claro.css" />
  <link rel="stylesheet" type="text/css" href="common/css/theme/themeDefault.css" />

  <style type="text/css">
		#appRealmTabContainer .dijitTabChecked {
			background-color: Red!important;
			background-image: none;
			/* background-image: url('Insert URL for SELECTED Tab Image')!important; */
		}

		#appRealmTabContainer .dijitTab {
			background-color: green;
			background-image: none;
			font-weight: bold;
 			font-size: 10px;
			/* background-image: url('Insert URL for unselected Tab Image'); */
		}
	</style>



  <title>Dojo Demo</title>
        
  <script type="text/javascript">
    var djConfig = {
      parseOnLoad: true,
      baseUrl:"./",
      modulePaths : {
        "dijit" : "js/dojo-root/dijit",
        "dojo" : "js/dojo-root/dojo",
        "dojox" : "js/dojo-root/dojox",
        "common" : "js/common"
      }
    };
  </script>    
  <!-- src="http://ajax.googleapis.com/ajax/libs/dojo/1.6/dojo/dojo.xd.js" -->
  <script type="text/javascript" src="js/dojo-root/dojo/dojo.js"></script>     
  <script type="text/javascript" src="js/common/common.js"></script> 
  <script type="text/javascript" src="js/init.js"></script>     
  <script type="text/javascript" src="js/debug/debugUtil.js"></script>     
  
  <script type="text/javascript">
    dojo.require("dijit.MenuBar");
    dojo.require("dijit.MenuBarItem");
    dojo.require("dijit.layout.BorderContainer");
    dojo.require("dijit.layout.TabContainer");
    dojo.require("dijit.layout.AccordionContainer");
    dojo.require("dijit.layout.ContentPane");
  </script>
  
  <script type="text/javascript">
    initBaseURL();
    console.log("WebApp's base url: "+baseURL());
  </script>

  <script type="text/javascript">
    dojo.addOnLoad(function() {
    	initApp();
    });
  </script>

</head>

<body class="claro">
  <!-- Layout derived from http://dojotoolkit.org/reference-guide/dijit/layout.html#dijit-layout -->
  <div id="appOutmost" dojoType="dijit.layout.BorderContainer" style="width: 100%; height: 100%;">

    <!-- HEADER -->
    <div id="appHeader" dojoType="dijit.layout.ContentPane" region="top" >
		  <div dojoType="dijit.layout.BorderContainer" style="margin:0;padding:0;">
    		<div dojoType="dijit.layout.ContentPane" region="bottom" style="padding:0;margin:0;" >
 					<div id="realmMenuId" dojoType="dijit.MenuBar" ></div>
 				</div>
 			</div>
    </div>

    <!-- CONTENT -->
  <!-- <div id="appContent"> --> <!-- This div acts as a reference to put dynamic content -->
  <div id="appContent" dojoType="dijit.layout.ContentPane" region="center" style="margin:0;padding:0;" >
    <div id="appRealmStackContainer" dojoType="dijit.layout.StackContainer" >
      <div id="appRealmContentPane1" dojoType="dijit.layout.ContentPane" title="Stack 1">
        Each of the <b>Menu Bar Items</b> represents a Realm. Click them to load its content on the page.
      </div>
      <div id="appRealmContentPane2" dojoType="dijit.layout.ContentPane" title="Stack 2">
        This is the content stack 2.
      </div>
      <div id="appRealmTabContainerParent" dojoType="dijit.layout.ContentPane" title="Stack 3" style="margin:0;padding:0;" selected="true">
    	  <div id="appRealmTabContainer" dojoType="dijit.layout.TabContainer" region="center" style="width: 400px; height: 400px; background-color:grey;" tabPosition="left-h"	tabStrip="true">
      	  <div dojoType="dijit.layout.ContentPane" title="My first tab"	selected="true">Lorem ipsum and all around...</div>
        	<div dojoType="dijit.layout.ContentPane" title="My second tab"> Lorem ipsum and all around - second...</div>
	        <div dojoType="dijit.layout.ContentPane" title="My last tab"> Lorem ipsum and all around - last...</div>
  	      <!-- <div dojoType="dijit.layout.ContentPane" title="My external content tab" href="extContentPage.html"> -->
    	    <div id="extContentDemoId" dojoType="dijit.layout.ContentPane" title="My external content">
      	    <button id="btn1" dojoType="dijit.form.Button">Load another content page 
        	    <script type="dojo/method" event="onClick" args="evt">
          	    //dijit.byId(this.id).set("href", "extContentPage2.html");
            	  dijit.byId("btn1").value = "changed button name on click";
  	            dijit.byId("extContentDemoId").innerHTML += " Clicked ";
    	          dijit.byId("extContentDemoId").setHref("./extContentPage2.html");
      	      </script>
        	  </button>
          	Lorem ipsum and all around - external content page ...
  	      </div>
    	    <div id="extContextMenuDemoId" dojoType="dijit.layout.ContentPane" title="My external context menu demo">
      	    <button id="btn2" dojoType="dijit.form.Button">Load external context menu demo page 
        	    <script type="dojo/method" event="onClick" args="evt">
          	    dijit.byId("extContextMenuDemoId").innerHTML += " Clicked ";
            	  dijit.byId("extContextMenuDemoId").setHref("samples/contextMenuDemo.html");
	            </script>
    	      </button>
      	    Lorem ipsum and all around - external context menu demo ...
        	</div>
	      </div>
	    </div><!-- end appRealmTabContainer -->
	  </div><!-- end appRealmTabContainerParent -->

  </div><!-- end appRealmStackContainer -->

    <!-- RIGHT SIDEBAR -->
    <div id="appSidebar" dojoType="dijit.layout.ContentPane" region="trailing">
      Trailing pane
    </div>

    <!-- FOOTER -->
    <div id="appFooter" dojoType="dijit.layout.ContentPane" region="bottom">
      Footer pane
    </div>
  
  </div>

</body>

</html>